<template>
  <div id="coming">
   <ul>
   	  <li v-for="item in Coming" :key="item.id">
		  <div class="img-wraper"><img :src="item.img" ></div>
		  <div class="desc-wraper">
		  	<p class="name">{{item.name}}</p>
			<p><span>{{item.people}}</span><span class="desc-color">想看</span></p>
			<p class="desc-color actors">{{item.actors}}</p>
			<p class="desc-color">未来30天内上映</p>
		  </div>
		  <div class="button-wraper">
		  	<button>预售</button>
		  </div>
	  </li>
   </ul>

  </div>
</template>
<script>
	export default{
		name: 'Coming',
		data(){
			return {
				Coming: []
			}
		},
		created(){
			this.getComing();
		},
		methods: {
			getComing(){
				// var that = this;
				axios.get('/mock/Coming.json')
				  .then(response => {
				    console.log(response);
					if(response.status == 200){
						if(response.data && response.data.Coming){
							this.Coming = response.data.Coming;
						}
					}
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
			}
		}
	}
</script>
<style scoped>
	.button-wraper{
		float: right;
		line-height: 80px;
	}
	img{
		width: 70px;
	}
	.img-wraper{
		width: 23%;
		margin-bottom: 10px;
		float: left;
	}
	.desc-wraper{
		width: 60%;
		float: left;
	}
	li{
		margin: 15px;
		/* 清除浮动 */
		overflow: hidden;
		border-bottom: 1px solid #CCCCCC;
	}
	.desc-color{
		color: #666;
		font-size: 14px;
	}
	.name{
		font-size: 18px;
		font-weight: bold;
	}
	.actors{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	p{
		line-height: 25px;
	}
	button{
		width: 50px;
		height: 30px;
		color: white;
		background-color: #48a9e5;
		border-radius: 5px;
		border: none;
		font-weight: bold;
	}
</style>